<template>
	<view>
		<image src="@/static/images/user_banner.jpeg" class="banner" mode="widthFix"></image>
		<view class="header">
			<u-icon name="arrow-left" color="#fff" size="44" @click="goBack"></u-icon>
			<u-icon name="more-dot-fill" color="#fff" size="44" @click="clickMenu"></u-icon>
		</view>
		<view class="content">
			<view class="top-nav">
				<view class="avatar-box">
					<image :src="info.AvatarImg == '' ? '../../static/images/avatar.jpg' : info.AvatarImg"
						class="avatar" @click="actPreviewImage"></image>
					<view class="nickname">{{ info.Nickname }}</view>	 
					<g-preview-img :imgList="[info.AvatarImg]" ref="preview1" style="position:fixed;bottom:0;left:0;z-index:100000" v-if="showPreviewRef" @preivew="closePreview"></g-preview-img>
				</view>
				<view class="navs">
					<view class="nav-item">
						<text class="num">{{achievement.score}}</text>
						<text class="label">{{ $t('home.score') }}</text>
					</view>
					<view class="nav-item">
						<text class="num">{{ achievement.followCount }}</text>
						<text class="label">{{ $t('home.attention') }}</text>
					</view>
					<view class="nav-item">
						<text class="num">{{achievement.fansCount}}</text>
						<text class="label">{{ $t('home.fans') }}</text>
					</view>
				</view>
			</view>
			<view class="nickname-box u-m-b-20">
				<view class="right-box">
					<view v-show="uid == loginUid" style="background:#fff;height:40rpx;width:100rpx"></view>
					<view class="follow" v-if="uid != loginUid" :class="isFollow == 1 ? ' active-follow' : ''"
						@click="actFollow(info.Uid)">
						<u-icon name="plus" v-if="isFollow != 1" class="u-m-r-6"></u-icon>
						{{ isFollow == 1 ? $t('home.attented'): $t('home.attention') }}
					</view>
					<!-- 从社区或者动态中进入个人中心页面,isFromContact的值为0,此时不用特意强调发消息按钮 -->
					<view v-if="isFromContact == 0">
						<view v-if="isFriend == 1 && uid != loginUid"
							@click="checkUserToRoom(info.Uid, info.Nickname, info.AvatarImg)"
							class="u-flex u-m-l-20 send-box">
							<u-icon name="chat" size="44"></u-icon>
							<text class="u-m-l-6">发消息</text>
						</view>
						<view class="u-m-l-20 add-friend" v-if="isFriend == 0 && userType == 1 && uid != loginUid"
							@click="apply">
							<u-icon name="plus" class="u-m-r-6"></u-icon>{{ $t('home.add_friend') }}
						</view>
						<view class="u-m-l-20 add-friend"
							v-if="isFriend == 0 && groupId > 0 && userType == 2 && uid != loginUid" @click="apply">
							<u-icon name="plus" class="u-m-r-6"></u-icon>{{ $t('home.add_friend') }}
						</view>
					</view>
				</view>
			</view>

			<u-tabs :list="tablist" :is-scroll="false" :current="current" class="u-m-b-20" @change="change"></u-tabs>
			<!-- 帖子列表 -->
			<view v-if="current == 0" style="height:80vh;position:relative">
				<view v-if="list.length == 0 || list == null" class="no-data">{{ $t('home.bbs_empty') }}</view>
				<view v-for="(item, index) in list" v-else>
					<article-item :item="item" :index="index" :type="'images'" :key="index" @getList="getList"
						@resetList="resetList" @favorite="actCollect">
					</article-item>
				</view>
			</view>
			<!-- 关注 -->
			<scroll-view v-if="current == 1" style="height:80vh" scroll-y>
				<view v-if="list.length == 0 || list == null" class="no-data">{{ $t('home.bbs_empty') }}</view>
				<view class="attention-list">
					<view class="attention-item u-flex" v-for="(item,index) in list" :key="index">
						<view class="left u-flex">
							<image :src="item.Avatar ? item.Avatar : '../../static/images/avatar.jpg'" class="avatar">
							</image>
							<view>
								<view class="nickname">{{ item.Nickname}}</view>
								<view class="email">{{ item.Email ? item.Email : item.LoginId}}</view>
							</view>
						</view>
						<view class="right" :class="item.MyIsFollow == 1 ? 'attented': ''"
							@click="actFollow2(item, item.Uid,index)">
							{{item.MyIsFollow == 1 ? $t('home.attented'): ('+ ' + $t('home.attention'))}}
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 粉丝 -->
			<scroll-view v-if="current == 2" style="height:80vh" scroll-y>
				<view v-if="list.length == 0 || list == null" class="no-data">{{ $t('home.bbs_empty') }}</view>
				<view class="attention-list">
					<view class="attention-item u-flex" v-for="(item,index) in list" :key="index">
						<view class="left u-flex">
							<image :src="item.Avatar ? item.Avatar : '../../static/images/avatar.jpg'" class="avatar">
							</image>
							<view>
								<view class="nickname">{{ item.Nickname}}</view>
								<view class="email">{{ item.Email ? item.Email : item.LoginId}}</view>
							</view>
						</view>
						<view class="right" :class="item.MyIsFollow == 1 ? 'attented': ''"
							@click="actFollow2(item,item.Uid,index)">
							{{item.MyIsFollow == 1 ? $t('home.attented'): ('+ ' + $t('home.attention'))}}
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 收藏列表 -->
			<scroll-view v-if="current == 3" style="height:80vh" scroll-y>
				<view v-if="JSON.parse(JSON.stringify(collectList)).length == 0 || collectList == null" class="no-data">{{ $t('home.bbs_empty') }}</view>
				<template v-for="(item, index) in collectList" v-else>
					<article-item :item="item" :index="index" :type="'images'" :collectPermission="0"
						@getList="getCollectionList" @resetList="resetList">
					</article-item>
				</template>
			</scroll-view>
		</view>
		<!-- 如果是点击通讯录好友进入个人中心页面,则isFromContact值为1,着重强调发消息 -->
		<view class="send-box-container">
			<view v-if="isFromContact ==1" @click="checkUserToRoom(info.Uid, info.Nickname, info.AvatarImg)"
				class="u-flex send-box1">
				<u-icon name="chat" size="50" color="#fff"></u-icon>
				<text class="u-m-l-16">{{$t('home.sms_send')}}</text>
			</view>
		</view>
		<u-modal v-model="editTagShow" :title="$t('home.edit_personal_signature')" :show-cancel-button="true"
			@confirm="submit" :cancel-text="$t('home.btn_cancel')" :confirm-text="$t('home.btn_confirm')">
			<view class="slot-content">
				<u-input :placeholder="$t('home.user_tag_tips')" v-model="tagValue"></u-input>
			</view>
		</u-modal>
		<!-- 添加好友申请 -->
		<u-modal v-model="showApply" :title="$t('home.request_friend')" :show-cancel-button="true"
			:confirm-text="$t('home.send')" @confirm="actApply" :cancel-text="$t('home.btn_cancel')">
			<view class="slot-content u-flex u-col-top">
				<view class="user-label u-font-32">{{$t('home.user_iam')}}</view>
				<u-input v-model="content" type="textarea" height="140" border :custom-style="{'font-size': '32rpx'}"
					style="margin-top: -7rpx;margin-left:20rpx" />
			</view>
		</u-modal>
		<u-modal v-model="showModal" :show-title="false" :show-cancel-button="true"
			:confirm-text="$t('home.btn_no_follow')" :cancel-text="$t('home.btn_cancel')" @confirm="actNoFollow()">
			<view class="slot-content" style="padding: 50rpx 10rpx 50rpx 20rpx;text-align: center">
				<text>{{ $t('home.confirm_no_follow') }}{{ name }}?</text>
			</view>
		</u-modal>
		<view class="more-action" v-if="isMore">
			<view class="more-action_item" @click="$goPage('/user/complaints')">{{$t('home.btn_report')}}</view>
		</view>
	</view>
</template>
<script>
	import store from '@/store/index.js';
	import articleItem from "@/components/article-item/index.vue";
	import timStore from "../TUIKit/TUICore/store";
	export default {
		data() {
			return {
				userType: 2,
				current: 0,
				editTagShow: false,
				tagValue: '',
				uid: 0,
				groupId: 0,
				info: {},
				achievement: {}, //个人成就
				isFriend: 0, //该用户是不是登录者的好友
				isFollow: -1, //是否关注了该用户
				showApply: false, //添加好友模态框显示
				content: '',
				followCount: 0,
				fansCount: 0,
				collectionCount: 0,
				topicCount: 0,
				list: [], //帖子列表
				collectList: [],
				showModal: false,
				userid: 0,
				name: '',
				index: 0,
				stat: 1,
				isMore: false,
				loginUid: 0,
				isFromContact: 0,
				showPreviewRef: false,
			}
		},
		onLoad(option) {
			this.userType = store.state.vuex_user.type || 2
			this.userUid = store.state.vuex_user.uid
			this.userAvatar = store.state.vuex_user.avatar
			this.userUname = store.state.vuex_user.uname
			this.uid = option.uid || 0
			this.isFromContact = option.isFromContact || 0
			this.groupId = option.groupId || 0
			this.loginUid = uni.getStorageSync('userInfo').uid
			this.loaded()

		},
		components: {
			articleItem
		},
		onShow() {
			this.loaded()
			this.loginUid = uni.getStorageSync('userInfo').uid
		},
		computed: {
			// i18n() {
			// 	return this.$t('home')
			// },
			tablist() {
				return [{
						name: this.$t('home.my_post') + '(' + this.topicCount + ')'
					},
					{
						name: this.$t('home.attention')
					},
					{
						name: this.$t('home.fans')
					},
					{
						name: this.$t('home.collection') + '(' + this.collectionCount + ')'
					}
				]
			}
		},
		methods: {
			loaded() {
				this.content = this.userUname;
				this.getInfo();
				this.getUserFriendship();
				this.getList()
				this.getIsFollow()
				this.getUserAchievement()
				this.getCollectionCount()
				this.connectGoEasy();
			},
			actPreviewImage() {
				this.showPreviewRef = true
				this.$nextTick(()=> {
					console.log(this.$refs.preview1.handlePreviewImg)
					this.$refs.preview1.handlePreviewImg(0)
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			clickMenu() {
				this.isMore = !this.isMore;
			},
			getUserAchievement() {
				this.$http.get('/client/user/account/achievement', {
					userid: this.uid
				}).then(res => {
					this.achievement = res
					console.log(this.achievement)
				})
			},
			getInfo() {
				this.$http.get('/mgr/user/account/info', {
					'uid': this.uid
				}).then(res => {
					this.info = res;
					console.log(this.info)

				});
			},
			getIsFollow() {
				this.$http.get('/client/user/account/info', {
					userid: this.uid
				}).then(res => {
					console.log(res)
					this.isFollow = res.IsFollow
				})
			},
			actCollect(res, index) {
				console.log(res)
				console.log(index)
				this.list[index].IsFavorite = res.stat
				this.list[index].Favorites = res.favorites
			},
			//已关注取消关注,未关注变已关注
			actFollow(uid) {
				this.$http.post('/client/user/account/follow', {
					otherUid: uid
				}).then(res => {
					console.log(res)
					if (this.isFollow == 1) {
						this.stat = 1
						this.userid = this.uid
						this.name = this.info.Nickname
						this.showModal = true
					} else {
						this.isFollow = 1
					}
				})
			},
			actFollow2(item, uid, index) {
				if (item.MyIsFollow == 1) {
					this.userid = uid;
					this.showModal = true
					this.index = index
					this.name = item.Nickname
					this.stat = 2
				} else {
					this.$http.post('/client/user/account/follow', {
						otherUid: uid
					}).then(res => {
						this.$set(item, 'MyIsFollow', 1)
						this.$u.toast(this.$t('mine.attention_success'))
						this.getAttentionList()
					})
				}
			},
			closePreview() {
				this.showPreviewRef = false
			},
			actNoFollow() {
				//stat为1，表示是否关注该用户
				//stat为2，表示该用户关注列表和被关注列表
				this.$http.post('/client/user/account/follow', {
					otherUid: this.userid
				}).then(res => {
					if (this.stat == 1) {
						this.isFollow = -1
					} else {
						this.list[this.index].MyIsFollow = -1
					}


				})
			},
			connectGoEasy() {
				this.goEasy.connect({
					id: this.userUid,
					data: {
						name: this.userUname,
						avatar: this.userAvatar
					},
					onSuccess: () => {
						console.log('GoEasy connect successfully.')
					},
					onFailed: (error) => {
						console.log('Failed to connect GoEasy, code:' + error.code + ',error:' + error
							.content);
					},
					onProgress: (attempts) => {
						console.log('GoEasy is connecting', attempts);
					}
				});
				//订阅Goeasy消息
				this.goEasy.pubsub.subscribe({
					channel: "user" + this.userUid,
					onMessage: function(message) {
						console.log("Channel:" + message.channel + " content:" +
							message.content);
					},
					onSuccess: function() {
						console.log("Channel订阅成功。");
					},
					onFailed: function(error) {
						console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" +
							error.content)
					}
				});
			},
			submit() {
				var that = this;
				this.$http.post('/mgr/user/friend/update', {
					friend: this.uid,
					tag: this.tagValue
				}).then(res => {
					that.isSave = false;
					uni.showToast({
						title: this.$t('home.save_success'),
						icon: 'none',
					});
				});
			},
			//判断该好友
			getUserFriendship() {
				this.$http.get('/mgr/user/friendship', {
					'friend': this.uid
				}).then(res => {
					console.log(res)
					if (res == 0) {
						this.isFriend = res
					} else {
						this.isFriend = res.isFriend
						this.tagValue = res.tag
					}

				});
			},
			//获取帖子列表
			getList() {
				this.$http.get('/bbs/topic/pager/data', {
					userid: this.uid,
					type: 1,
					mine: 1
				}).then(res => {
					this.list = res;
					this.topicCount = res.length
				})
			},
			resetList() {
				this.getCollectionList();
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getAttentionList() {
				this.$http.get('/client/user/account/follow/list', {
					userid: this.uid
				}).then(res => {
					this.list = res.list
					this.followCount = res.count
					this.list.forEach(item => {
						this.$http.get('/client/user/account/info', {
							userid: item.Uid
						}).then(res => {
							this.$set(item, 'MyIsFollow', res.IsFollow)
						})
					})
					console.log(this.list)
				})
			},
			getFansList() {
				this.$http.get('/client/user/account/fans/list', {
					userid: this.uid
				}).then(res => {
					this.list = res.list
					this.fansCount = res.count
					this.list.forEach(item => {
						this.$http.get('/client/user/account/info', {
							userid: item.Uid
						}).then(res => {
							this.$set(item, 'MyIsFollow', res.IsFollow)
						})
					})
				})
			},
			//该函数仅仅用于计算收藏总数，并不进行list赋值
			getCollectionCount() {
				this.$http.get('/bbs/topic/favorite/pager/data', {
					type: 1,
					mine: 1,
					userid: this.uid
				}).then(res => {
					this.collectionCount = res.length
				})
			},
			getCollectionList() {
				console.log(this.collectionCount)
				this.$http.get('/bbs/topic/favorite/pager/data', {
					type: 1,
					mine: 1,
					userid: this.uid
				}).then(res => {
					this.collectList = res;
					this.collectionCount = res.length
				})
			},
			//添加好友申请
			actApply() {
				let that = this;
				let data = {
					friend: this.uid,
					content: this.content
				};
				this.$http.post('/mgr/user/friend/apply', data).then(res => {
					uni.showToast({
						title: this.$t('home.apply_suc'),
					});
					setTimeout(function() {
						that.getInfo();
						that.getUserFriendship();
						that.showApply = false;
					});
				});
			},
			apply() {
				this.$store.commit('checkUserLogin');
				this.showApply = true;
			},
			checkUserToRoom(uid, nickname, avatar) {
				const conversationID = 'C2C' + uid;
				timStore.commit("timStore/setConversationID", conversationID);
				//uni.$TUIKit.TUIChatServer.updateStore(value.conversationID)
				uni.navigateTo({
					url: `../TUIKit/TUIPages/TUIChat/index?conversationName=${nickname}`,
				});
				uni.$TUIKit.TUIConversationServer.setMessageRead(conversationID);
				uni.$TUIKit.TUIConversationServer.getConversationProfile(
					conversationID
				).then(res => {
					// 通知 TUIChat 关闭当前会话
					timStore.commit("timStore/setConversation", res.data.conversation);
					// uni.$TUIKit.getStore()['TUIChat'].conversation = res.data.conversation;
				});
			},
			change(index) {
				this.current = index
				switch (index) {
					case 0:
						this.getList()
						break;
					case 1:
						this.getAttentionList()
						break;
					case 2:
						this.getFansList()
						break;
					case 3:
						this.getCollectionList()
						break;
					default:
						break;
				}
			}
		}
	}
</script>
<style lang="scss">
	.banner {
		width: 100%;
	}

	.header {
		position: absolute;
		top: 90rpx;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 32rpx;
	}

	.send-box-container {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		padding: 10rpx 66rpx;
		background-color: #fff;

		.send-box1 {
			display: flex;
			justify-content: center;
			width: 100%;
			padding: 16rpx 0;
			background-color: #5186FF;
			border-radius: 80rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.content {
		width: 100%;
		height: 90vh;
		margin-top: -20rpx;
		padding: 0 32rpx;
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.top-nav {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.avatar-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: -20rpx;
				margin-right: 30rpx;

				.avatar {
					width: 160rpx;
					height: 160rpx;
					border: 5rpx solid #fff;
					margin-top: -70rpx;
					border-radius: 160rpx;

				}

				.nickname {
					font-size: 36rpx;
					margin-top: 20rpx;
					text-align: center;
				}

			}

			.navs {
				flex: 2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: -76rpx;
				margin-right: 20rpx;

				.nav-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.num {
						font-size: 32rpx;
					}

					.label {
						font-size: 28rpx;
						color: #a7a8a8;
					}
				}
			}
		}

		.nickname-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: -64rpx;

			.right-box {
				display: flex;
				align-items: center;

				.follow {
					padding: 6rpx 30rpx;
					background-color: #fff;
					color: #fff;
					background-color: #1B71FF;
					border-radius: 50rpx;
					margin-right: 10rpx;
				}

				.send-box {
					background-color: #1B71FF;
					padding: 10rpx 40rpx;
					border-radius: 30rpx;
					color: #fff;
				}

				.active-follow {
					background-color: #e9ecec;
					color: #7c7d7e;
				}

				.add-friend {
					padding: 0 30rpx;
					background-color: #1B71FF;
					color: #fff;
					border-radius: 24rpx;
					border: 1px solid #215EFF;
				}
			}
		}

		.tag {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			color: #66656e;
			font-size: 26rpx;
		}
	}

	.slot-content {
		padding: 20rpx;
	}

	.attention-list {
		padding: 0 20rpx;

		.attention-item {
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0;
			border-bottom: 1px solid #e6e4e7;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
				margin-right: 20rpx;
			}

			.nickname {
				width: 200rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.email {
				width: 200rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 24rpx;
				color: #7a7c7c;
			}

			.right {
				padding: 12rpx 50rpx;
				background-color: #E8EEFE;
				color: #1651EF;
				border-radius: 30rpx;
				font-size: 26rpx;
				margin-top: -8rpx;
				white-space: nowrap;
			}

			.attented {
				background-color: #F4F4F4;
				color: #7a7c7c;

			}
		}
	}

	.no-data {
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.more-action {
		z-index: 9999;
		position: fixed;
		right: 20rpx;
		top: 150rpx;
		padding: 10rpx 30rpx;
		background: #313131;
		border-radius: 10rpx;

		&_item {
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 2;
		}

		&::after {
			position: absolute;
			top: -15rpx;
			right: 24rpx;
			content: '';
			width: 0;
			height: 0;
			border-left: 12rpx solid transparent;
			border-right: 12rpx solid transparent;
			border-bottom: 16rpx solid #313131;
		}
	}
</style>
